
<template>
    <div>
      <h3 class="notitle">当前页面：{{ $route.meta.title }}</h3>
      <div class="pb10px">
            <!-- ctrl+alt+l 格式化代码   -->
            <el-input v-model="searchForm.title"  class="input1" clearable placeholder="请输入问题标题"
            size="big" ></el-input>
            <el-button type="primary" icon="el-icon-search" size="big" class="mr10px" @click="handleSearch">搜索问题</el-button>
      </div>
      
     
      <el-table
              ref="multipleTable"
              :data="tableData"
              tooltip-effect="dark"
              style="width: 100%;margin-top: 5px;padding: 0;"
      >
        <el-table-column
            prop="title"
            width="1200px"
            show-overflow-tooltip="true"
            style="font-size: 25px;"
        >
          
        </el-table-column>
        <el-table-column
            width="200px"
            align="center"
        >
        <template slot-scope="scope">
              
              <el-button
                  size="mini"
                  type="success"
                  @click="go(scope.row)">详情页面
              </el-button>
              
            </template>
        </el-table-column>
        </el-table>

      

      <custom-pages
              @current-change="currentChange"
              @size-change="sizeChange"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              :current-page="pageInfo.pageNum"
              class="custom-pages"
          >
      </custom-pages>

      <el-dialog
            title="提示"
            :visible.sync="error"
            width="30%"
            append-to-body
            top="20%"
            ><!-- append-to-body出现不会屏幕变暗,top位置下调 -->
            <span>{{ message }}</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="error = false">取 消</el-button>
                <el-button type="primary" @click="error = false">确 定</el-button>
            </span>
      </el-dialog>
    </div>

    
</template>

<script>
import http from "@/utils/request";
import create from "@/mixins/create";
export default {
   
  data() {
    return {
      tableData: [],//数据
      searchForm: {
          title: ""
      },
      message:'',
      error: false,
      
      api:{
        pageUrl:'/faq/getfaq',
      }
    };
  },
  methods: {
    go(row){
      
      sessionStorage.setItem('title',row.title)
      sessionStorage.setItem('content',row.anser)
      this.$router.push('/FrequentlyQuestions')
    },
    //获取分页数据
    getList() {
            let formData = {
                //当前页
                pageNum: this.pageInfo.pageNum,
                //分页大小
                pageSize:this.pageInfo.pageSize,
                //总条数
                total: this.pageInfo.total,
            };
            
            http.get(`${this.api.pageUrl}?${new URLSearchParams(formData).toString()}`).then(res => {
                if(res.data.code == 200){
                    this.tableData = res.data.data.records
                    this.pageInfo.total = res.data.data.total//动态获取分页
                    console.log(res)
                }
                
                
            })
        },
      //搜索
      handleSearch() {
            let formData1={
              title:this.searchForm.title,
              //当前页
              pageNum: 1,
              //分页大小
              pageSize:5,
            }
            
            http.get(`/faq/selectfaq?${new URLSearchParams(formData1).toString()}`).then(res => {
                    // console.log(res)
                    if (res.data.code == 200) {
                        
                        this.message=res.data.msg,
                        this.error=true,
                        //更换表格数据
                        this.notices = res.data.data.records
                        console.log(this.notices)
                    }
                    else {
                        this.message=res.data.msg,
                        this.error=true,
                        this.loadNotice()
                    }
          })
      },
  },
  mixins: [create],
 
}
</script>

<style scoped>
  .notitle{
    color: black;
    font-size:25px;
    margin-top: 1%; 
    margin-left: 0%;
  }/* 面包屑 */

 

.w-e-text{
  text-align: left;
}  
.input1{
    width: 260px;
    margin-bottom: 20px;
}
.custom-pages {
        position: absolute;
        /* position: relative; */
        top: 100%;
        /* 设置其始终位于页面底部 */
}






</style>